<template>
<div>
    <HomeTop></HomeTop>
    <HomeRight></HomeRight>
    <MyCenterPlugin></MyCenterPlugin>
    <ShoppingCartSearch></ShoppingCartSearch>
    <div class="MyFoot-logo">
      <img src="https://img.alicdn.com/imgextra/i2/O1CN01bw6IxW1J9dTQPa01x_!!6000000000986-2-tps-148-56.png"></img>
      <h2>我的淘宝</h2></div>
      <div class="MyFoot-title2">批量管理</div>
       <div class="MyFoot-right-little-search-div">
         <input type="text" placeholder="搜索" class="MyFoot-right-little-search"></input>
        <span class="MyFoot-right-little-search-icon"><i class="iconfont icon-sousuo"  @click="MyFootToSearch2()"></i></span>
    </div>

    <div class="MyFoot-onedayfoot-bigbox" v-for="(item,index) in datelist" :key="index">
        
        <div class="MyFoot-onedayfoot-bigbox-title"><span class="MyFoot-onedayfoot-bigbox-title-span1">{{item.date}}</span><span class="MyFoot-onedayfoot-bigbox-title-span2">({{item.babylist.length}}件宝贝)</span></div>  
            
            <div class="MyFoot-onedayfoot-bigbox-item" v-for="(item2,index2) in item.babylist" :key="index2" @mouseenter="showdel($event)" @mouseleave="closedel($event)">
                <div class=" MyFoot-onedayfoot-bigbox-hover" ><i class="iconfont icon-del"></i></div>
                <router-link to="/ProductView"  ><img class="MyFoot-onedayfoot-bigbox-img" :src="item2.img"></router-link> 
                <router-link to="/ProductView" class="MyFoot-onedayfoot-bigbox-item-router"><div class="MyFoot-onedayfoot-bigbox-name">{{item2.name}}</div></router-link>
                <router-link to="/ProductView" class="MyFoot-onedayfoot-bigbox-item-router"><div class="MyFoot-onedayfoot-bigbox-price">{{item2.price}}</div></router-link>
            </div>
    </div>


</div>
</template>
<script>
import "../style/MyFootView.css";
export default {
  name: "MyFootView",
  data() {
    return {
       
        datelist: [
            {
                date:"10月1日",
                babylist:[
                    {
                        img: "https://img.alicdn.com/bao/uploaded/i3/2215559940809/O1CN01oy53PF1HqZNVnaLyA_!!0-item_pic.jpg",
                        name: "耳机有线入耳式高音质type-c圆孔接口降噪Typec",
                        price: "￥0.01",  
                    },
                    {
                        img: "https://img.alicdn.com/imgextra/i2/2815248489/O1CN01Re0ots2Ca1HC6AINk_!!2815248489.jpg_q50.jpg_.webp",
                        name: "牛奶",
                        price: "￥9.00",  
                    }
                ]
            },
            {
                date:"10月2日",
                babylist:[
                    {
                        img: "https://img.alicdn.com/imgextra/i4/2815248489/O1CN01r6yyQ22Ca18zJXep0_!!2815248489.jpg_q50.jpg_.webp",
                        name: "哇哈哈",
                        price: "￥0.01", 
                    }
                ]
            },
            {
                date:"10月3日",
                babylist:[
                    {
                        img: "https://img.alicdn.com/imgextra/i2/2815248489/O1CN01Re0ots2Ca1HC6AINk_!!2815248489.jpg_q50.jpg_.webp",
                        name: "耳机有线入耳式高音质type-c圆孔接口降噪Typec",
                        price: "￥0.01", 
                    }
                ]
            }
        ],
      

    };
  },
  methods: {
    showdel(event){
        const currentItem = event.currentTarget;
      const delIcon = currentItem.querySelector('.MyFoot-onedayfoot-bigbox-hover');
      if(delIcon) {
        delIcon.style.display = 'block';
      }
    },
    closedel(event){
        const currentItem = event.currentTarget;
      const delIcon = currentItem.querySelector('.MyFoot-onedayfoot-bigbox-hover');
      if(delIcon) {
        delIcon.style.display = 'none';
      }
    },
    MyFootToSearch2() {
      const searchValue = document.querySelector(
        ".MyFoot-right-little-search"
      ).value;
      if (searchValue !== "") {
        this.$router.push({
          path: "/searchView",
          query: {
            value: searchValue,
          },
        });
      }
    },
  },
};
</script>
